<template>
    <el-dialog
        v-model="deleteApiDialogVisible"
        :title="header"
        width="20%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        {{body}}
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="deleteLoading" @click="submitDialog()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {ElNotification} from "element-plus";
import {apiRouteInfoQuery, deleteApiRouteInfoQuery} from "@/request/api";

export default {
    name: "ApiDeleteDialog",
    props: ['header', 'body', 'deleteData'],
    data() {
        return {
            deleteLoading: false
        }
    },
    methods: {
        cancelDialog() {
            this.$store.commit('closeDeleteApiDialogVisible');
        },
        submitDialog() {
            this.deleteLoading = true
            deleteApiRouteInfoQuery(this.deleteData).then(res => {
                if (res.code === '200') {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success'
                    });
                    apiRouteInfoQuery(this.apiSearchData).then(res => {
                        this.$store.commit('changeRouterDataList', res.data);
                    })
                    this.$store.commit('closeDeleteApiDialogVisible');
                    this.deleteLoading = false
                }
            }).catch(res => {
                this.deleteLoading = false
            })
        }
    },
    computed: {
        deleteApiDialogVisible() {
            return this.$store.state.deleteApiDialogVisible;
        },
        apiSearchData() {
            return this.$store.state.apiSearchData;
        }
    }
}
</script>

<style scoped>

</style>